<template>
  <div>
    <div class="left1">
      <dv-border-box-11 title="驾驶员个人信息">
        <div class="left11">
          <img src="@/assets/xm.png" alt="">
          <p>驾驶员:熊猫大侠<br>本月接受任务次数:24<br>已完成任务次数:23<br>异常驾驶次数:7</p>
        </div>
      </dv-border-box-11>
      <dv-decoration-11
          style="width:250px;height:60px;position: absolute;left: 17%;top: 45%;color: #fff;font-size: 22px">本月业绩排行榜
      </dv-decoration-11>
      <dv-decoration-9
          style="width:150px;height:150px;position: absolute;left: 6%;top: 55%;color: #fff;text-align: center">第二名<br>曾小贤
      </dv-decoration-9>
      <dv-decoration-9
          style="width:150px;height:150px;position: absolute;left: 20%;top: 55%;color: #fff;text-align: center">第一名<br>张伟
      </dv-decoration-9>
      <dv-decoration-9
          style="width:150px;height:150px;position: absolute;left: 33%;top: 55%;color: #fff;text-align: center">第三名<br>熊猫
      </dv-decoration-9>

      <div class="left12">
        <dv-border-box-1>
          <dv-scroll-board :config="config" style="width:560px;height:270px;position: absolute;left: 20px;top: 15px;"/>
        </dv-border-box-1>
      </div>

    </div>
    <div class="right1">
      <dv-border-box-3>
        <dv-decoration-7 style="width:220px;height:30px;color:#fff; position:absolute;left: 280px;top: 25px;">
          驾驶员行为统计分析图
        </dv-decoration-7>
        <div id="right11" style="width: 730px;height:300px;right: -35px;top: 70px"></div>
      </dv-border-box-3>
    </div>
    <div class="right2">
      <dv-decoration-8 style="width:300px;height:50px;position: absolute;left: 750px;top: 74%;"/>
      <p>驾驶员实时动态拍摄警告</p>
      <div class="right21">
        <dv-border-box-4 :reverse="true">
          <img src="@/assets/xm1.png" alt="">
        </dv-border-box-4>
      </div>
      <div class="right22">
        <dv-decoration-7 style="width:250px;height:30px;position: relative;left: 40px;color: #fff;">异常行为识别结果
        </dv-decoration-7>
        <div class="right221">
          <p style="  position: absolute;
  left: -110px;top: 5px">未系安全带</p>
          <el-progress :text-inside="true" :stroke-width="20" :percentage="87" style="width: 210px;"></el-progress>
        </div>
        <div class="right222">
          <p style="  position: absolute;
  left: -110px;top: 5px">未正视前方</p>
          <el-progress :text-inside="true" :stroke-width="20" :percentage="82" style="width: 210px;"></el-progress>
        </div>
        <div class="right223">
          <p style="  position: absolute;
  left: -110px;top: 5px">手离方向盘</p>
          <el-progress :text-inside="true" :stroke-width="20" :percentage="91" style="width: 210px;"></el-progress>
        </div>
        <div class="right224">
          <p style="  position: absolute;
  left: -110px;top: 5px">闭眼</p>
          <el-progress :text-inside="true" :stroke-width="20" :percentage="32" style="width: 210px;"></el-progress>
        </div>
        <div class="right225">
          <p style="  position: absolute;
  left: -110px;top: 5px">打哈欠</p>
          <el-progress :text-inside="true" :stroke-width="20" :percentage="21" style="width: 210px;"></el-progress>
        </div>
        <div class="right226">
          <p style="  position: absolute;
  left: -110px;top: 5px">左顾右盼</p>
          <el-progress :text-inside="true" :stroke-width="20" :percentage="96" style="width: 210px;"></el-progress>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      config: {
        header: ['姓名', '出勤率', '异常次数', '安全率'],
        data: [
          ['张伟', '100%', '12', '100%'],
          ['曾小贤', '100%', '21', '99%'],
          ['熊猫', '100%', '23', '99%'],
          ['吕子乔', '98%', '18', '98%'],
          ['关谷神奇', '98%', '22', '98%'],
          ['胡一菲', '98%', '16', '98%'],
          ['陈美嘉', '96%', '18', '97%'],
          ['诸葛大力', '95%', '8', '96%'],
          ['赵海棠', '94%', '32', '98%'],
          ['咖喱酱', '90%', '37', '92%'],
        ],
        index: true,
        columnWidth: [50],
        align: ['center']
      }
    }
  },
  created() {
  },
  mounted() {
    this.right11()
  },
  methods: {
    right11() {
      let echarts = require('echarts')
      var chartDom = document.getElementById('right11');
      var myChart = echarts.init(chartDom, 'dark');
      var option;

      var xAxisData = [];
      var data1 = [];
      var data2 = [];
      var data3 = [];
      var data4 = [];
      var data5 = [];

      for (var i = 1; i < 10; i++) {
        xAxisData.push('6月' + i + '号');
        data1.push((Math.random() * 2).toFixed(2));
        data2.push((Math.random() * 5).toFixed(2));
        data3.push((Math.random() + 0.3).toFixed(2));
        data4.push(-Math.random().toFixed(2));
        data5.push((-Math.random() - 0.2).toFixed(2));
      }

      var emphasisStyle = {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0,0,0,0.3)'
        }
      };

      option = {
        legend: {
          data: ['一级警告', '二级警告', '三级警告', '四级警告', '五级警告'],
          left: '10%'
        },
        brush: {
          toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
          xAxisIndex: 0
        },
        toolbox: {
          feature: {
            magicType: {
              type: ['stack', 'tiled']
            },
            dataView: {}
          }
        },
        tooltip: {},
        xAxis: {
          data: xAxisData,
          name: 'X Axis',
          axisLine: {onZero: true},
          splitLine: {show: false},
          splitArea: {show: false}
        },
        yAxis: {},
        grid: {
          bottom: 100
        },
        series: [
          {
            name: '一级警告',
            type: 'bar',
            stack: 'one',
            emphasis: emphasisStyle,
            data: data1
          },
          {
            name: '二级警告',
            type: 'bar',
            stack: 'one',
            emphasis: emphasisStyle,
            data: data2
          },
          {
            name: '三级警告',
            type: 'bar',
            stack: 'two',
            emphasis: emphasisStyle,
            data: data3
          },
          {
            name: '四级警告',
            type: 'bar',
            stack: 'two',
            emphasis: emphasisStyle,
            data: data4
          },
          {
            name: '五级警告',
            type: 'bar',
            stack: 'two',
            emphasis: emphasisStyle,
            data: data5
          }
        ]
      };

      myChart.on('brushSelected', renderBrushed);

      function renderBrushed(params) {
        var brushed = [];
        var brushComponent = params.batch[0];

        for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
          var rawIndices = brushComponent.selected[sIdx].dataIndex;
          brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
        }

        myChart.setOption({
          title: {
            backgroundColor: '#333',
            text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
            bottom: 0,
            right: '10%',
            width: 100,
            textStyle: {
              fontSize: 12,
              color: '#fff'
            }
          }
        });
      }

      option && myChart.setOption(option);

    }
  }
}
</script>

<style Lang="less" scoped>
.left1 {
  padding-left: 5%;
  width: 500px;
  height: 250px;
}

.left11 {
  position: absolute;
  left: 30px;
  top: 55px;
}

.left11 img {
  width: 180px;
  height: 180px;
}

.left11 p {
  position: absolute;
  left: 220px;
  top: 0;
  width: 200px;
  text-align: center;
  color: #fff;
  line-height: 40px;
  letter-spacing: 2px;
}

.left12 {
  position: absolute;
  left: 3%;
  top: 85%;
  width: 600px;
  height: 300px;
}

.right1 {
  position: absolute;
  right: 20px;
  top: 5px;
  width: 800px;
  height: 400px;
}

.right2 p {
  position: absolute;
  left: 53%;
  top: 70%;
  font-size: 20px;
  color: #fff;
}

.right21 {
  position: absolute;
  right: 10px;
  top: 72%;
  width: 800px;
  height: 400px;
}

.right21 img {
  position: relative;
  left: 50px;
  top: 70px;
  width: 400px;
  height: 300px;
}

.right22 {
  position: absolute;
  top: 77%;
  right: 2%;
  width: 320px;
  height: 350px;
}

.right221, .right222, .right223, .right224, .right225, .right226 {
  position: relative;
  padding-top: 28px;
  left: 110px;
}
</style>
